<template>
  <div class="mt-[24px] account_container">
    <div class="item">
      <span class="name">Mailing Management</span>
      <div class="des mt-[16px]">
        *Please be noted that this action is non-reversible,and you wil permanently lose access to
        your account and lose all your data if you do so
      </div>
      <div class="line mb-[16px]" />
      <div @click="deleteAcc" class="delete_btn cursor_poi">Delete My Account</div>
      <el-checkbox
        style="
          --el-checkbox-checked-text-color: #f76b1b;
          --el-checkbox-checked-bg-color: #f76b1b;
          --el-checkbox-checked-input-border-color: #f76b1b;
        "
        class="mt-[16px] check_view"
        v-model="isAgree"
        :text-color="'#F76B1B'"
        label="I acknowledge the risk of deleting my account"></el-checkbox>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';

  const isAgree = ref<boolean>(false);
  const showModal = ref<boolean>(false);

  const deleteAcc = () => {
    if (!isAgree.value) {
      ElMessage.warning({
        message: 'Please check agree',
        type: 'warning',
      });
      return;
    }
    showModal.value = true;
  };
</script>

<style scoped lang="scss">
  .account_container {
    .cursor_poi {
      cursor: pointer;
    }
    .delete_btn {
      display: flex;
      width: 400px;
      height: 48px;
      padding: 4px 10px;
      justify-content: center;
      align-items: center;
      background: #fbe6db;
      border-radius: 8px;
      color: var(---, #f76b1b);

      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .check_view {
      font-size: 16px;
      color: #7a7a7a;
    }
    .item {
      border-radius: 8px;
      border: 1px solid var(---3, #e1e2e3);
      padding: 24px 24px 20px 24px;
    }
    .des {
      color: var(---6, #7a7a7a);
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .operationTitle {
      color: var(---9, #222);
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .name {
      color: var(---9, #222);

      font-size: 18px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
    }
    .line {
      margin-top: 16px;
      background: #e1e2e3;
      width: 100%;
      height: 1px;
    }
  }
</style>
